<template>
  <cover-page @close="$emit('close')" :show="show">
    <h1 style="text-align: center;border-bottom: black dotted 2px;">版本信息{{version[0].name}}</h1>
    <div class="items">
      <div v-for="(item) in version" :key="item.name">
        <div class="head">
          <h2>版本{{item.name}}</h2>
          <label>{{item.time}}</label>
        </div>
        <div class="body">
          <p v-for="(list) in item.contents" :key="list">{{list}}</p>
        </div>
      </div>
    </div>
  </cover-page>
</template>
<script>
import version from '@/assets/json/version.json'
import CoverPage from '../../components/coverPage.vue'
export default {
  name: 'versionCard',
  props: ['show'],
  components: {
    CoverPage
  },
  data() {
    return {
      version
    }
  }
}
</script>
<style lang="scss" scoped>
.items {
  overflow: auto;

  p {
    line-height: 1.2;
  }
  .head {
    margin: 10px 0;
    display: flex;
    border-bottom: dotted 2px;
    h2 {
      flex: 1;
    }
    label {
      align-self: center;
    }
  }
}
</style>